<!DOCTYPE html>
<html lang="zh_CN" style="font-size: 100px">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>up</title>
    <link rel="stylesheet" href="/public/css/reset.css" />
    <link
      rel="stylesheet"
      href="/public//lib/element-ui/element-ui.css"
    />
    <link rel="stylesheet" href="/public/css/animate.min.css" />
    <link rel="stylesheet" href="/public/css/index.css" />
  </head>
  <!-- <script src="/public/js/https.js"></script> -->
  <body>
    <div id="app" :class="isMobile?'':'pc'">
      <!-- 导航 -->
      <div class="nav">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          text-color="#000"
          active-text-color="#6a9af1"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">{{prjTitle || '选择项目'}}</template>
            <!-- 项目列表 -->
            <el-menu-item
              v-for="(item,index) in prjList"
              :key="index"
              :index="index"
              :disabled="!item.edit"
              >{{item.name || '未知'}}</el-menu-item
            >
            <el-menu-item :disabled="lock" index="add"
              ><span style="color: #009659">+ 新建项目</span></el-menu-item
            >
          </el-submenu>
          <el-menu-item index="3" disabled v-if="!isMobile"
            >联系方式</el-menu-item
          >
          <el-menu-item index="4" disabled v-if="!isMobile">网盘</el-menu-item>
          <!-- <el-menu-item index="4" disabled v-if="!lock">编辑项目</el-menu-item> -->
        </el-menu>
        <!-- 顶部按钮组 -->
        <div class="tools">
          <!-- 初始化按钮 -->
          <el-card
            shadow="always"
            class="title-card animate__animated animate__flipInX"
            v-if="prjName&&!lock"
          >
            <h1 @click="resetInfo">初始化项目(测试)</h1>
          </el-card>
          <!-- 接口信息 -->
          <el-card
            shadow="always"
            class="title-card animate__animated animate__flipInX"
            :class="prjName==null?'no':''"
          >
            {{ prjName ? 'prjName: '+prjName : '无接口信息' }}
          </el-card>
          <!-- 解锁提示 -->
          <el-card
            shadow="always"
            class="title-card animate__animated animate__flipInX"
          >
            <h1 @click="unlock">{{lock?'未解锁':'已解锁'}}</h1>
          </el-card>
        </div>
      </div>
      <!-- main -->
      <div class="main" v-if="prjName">
        <template v-if="!loading">
          <!-- left -->
          <div class="main-box left">
            <!-- table -->
            <div class="card-box animate__animated animate__zoomIn">
              <el-table
                height="100%"
                :data="tableData"
                style="width: 100%"
                :cell-style="cellStyle"
                :header-cell-style="headerCellStyle"
                @cell-mouse-enter="mouseIn"
                @cell-mouse-leave="mouseOut"
              >
                <el-table-column prop="originalname" label="版本号">
                </el-table-column>
                <el-table-column prop="time" label="发布日期">
                </el-table-column>
                <el-table-column prop="qr" label="二维码">
                  <i class="el-icon-menu"></i>
                </el-table-column>
                <el-table-column label="保存">
                  <template slot-scope="scope">
                    <a :href="'/'+scope.row.path" style="color: #fff">
                      <el-button type="primary">下载</el-button>
                    </a>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- right -->
          <div class="main-box right" v-if="!isMobile">
            <!-- 上传模块 -->
            <div class="upload-box">
              <div v-if="!qr" class="box-tool">
                <el-upload
                  class="upload-demo animate__animated animate__zoomIn"
                  :drag="true"
                  :action="prjPath"
                  name="apk"
                  :before-upload="checkUpload"
                  :on-success="handleUpload"
                  :on-progress="handleProgerss"
                  accept="application/vnd.android.package-archive"
                  :disabled="lock"
                >
                  <i
                    :style="{color:lock?'#ccc':'#6a9af1'}"
                    class="el-icon-upload"
                  ></i>
                  <div class="el-upload__text">
                    <!-- 将文件拖到此处，或 -->
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="因安全原因，禁用拖拽上传功能"
                      placement="bottom"
                    >
                      <em :style="{color:lock?'#ccc':'#6a9af1'}"
                        >{{lock?'没有上传权限':'点击上传'}}</em
                      >
                    </el-tooltip>
                  </div>
                </el-upload>
              </div>
              <div class="box-tool" v-else>
                <div class="qr animate__animated animate__zoomIn">
                  <div class="qr-img" id="qrcode"></div>
                </div>
              </div>
            </div>
            <!-- 使用文档 -->
            <div class="upload-box">
              <!-- if -->
              <div v-if="!qr" class="str-box">
                <h1
                  class="animate__animated animate__slideInDown"
                  style="color: #fff"
                >
                  uni-app项目插件使用方法:
                </h1>
                <h2 class="animate__animated animate__flipInX">
                  1、项目需导入
                  <a
                    href="https://ext.dcloud.net.cn/plugin?id=329"
                    style="color: #ffc648"
                    target="_blank"
                    >uni-popup</a
                  >
                  插件
                </h2>
                <h2 class="animate__animated animate__flipInX">
                  2、组件需传入参数: <span style="color: #fff">prjName</span>
                </h2>
                <!-- <code>import updater from "updater.vue"</code><br>
              <code> <span><</span>updater :prjName="'xxx'"></updater> </code> -->
                <a class="vue-dl" href="/modules/uniapp/updater.vue">
                  <i class="el-icon-download"></i>
                  <span>点击下载组件</span>
                </a>
              </div>
              <div v-else class="str-box">
                <h1
                  class="animate__animated animate__flipInX"
                  style="color: #fff"
                >
                  手机扫描上方二维码下载APK
                </h1>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="loading" v-loading="true"></div>
        </template>
      </div>
      <div class="main" v-else>
        <div class="block">
          <el-carousel :interval="2000" type="card" height="3rem">
            <el-carousel-item v-for="(item,index) in prjList" :key="item">
              <div class="carousel-box" @click="handleSelect(2,['2',index])">
                <div class="car-name">{{item.name}}</div>
                <template v-if="item.versions.length > 0">
                  <div class="car-version">
                    最新版本:{{item.versions[item.versions.length -
                    1].originalname}}
                  </div>
                  <div class="car-version">
                    大小:{{formartSize(item.versions[item.versions.length -
                    1].size)}}
                  </div>
                  <div class="car-version">
                    时间:{{item.versions[item.versions.length - 1].createtime}}
                  </div>
                </template>
                <template v-else> 无其他信息 </template>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- foot -->
      <div class="foot">
        <h1>当前IP: <%=ip%></h1>
      </div>
      <!-- 弹出框 -->
      <el-dialog title="请填写项目信息" :visible.sync="dialogFlag">
        <div class="add-box">
          <!-- <div class="add-label">项目名称</div> -->
          <el-input placeholder="请输入项目名称" v-model="inputTitle" @input="addChange" clearable>
            <template slot="prepend">项目名称</template>
          </el-input>
        </div>
        <div class="add-box">
          <!-- <div class="add-label">项目路径</div> -->
          <el-input
            placeholder="请输入项目路径(英文)"
            v-model="inputPath"
            @input="addChange"
            clearable
          >
            <template slot="prepend">项目路径</template>
          </el-input>
        </div>
        <div class="btn-box">
          <el-button type="primary" @click="checkPath" :disabled="!addFlag">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </body>
  <script src="/public/lib/vue/vue.min.js"></script>
  <script src="/public/lib/element-ui/elementui.js"></script>
  <script src="/public/lib/axios/axios.min.js"></script>
  <script src="/public/js/qrcode.min.js"></script>
  <script src="/public/js/tool.js"></script>
  <script src="/public/js/index.js"></script>
</html>
